<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <nav>
        <div class="nav">
            <div class="logo">
                <RouterLink to="/">
                    <img src="../assets/img/icon_logo.png" alt="">
                </RouterLink>
            </div>
            <div class="nav-left" v-if="!islogin">
                <div style="color: #190E64;"><a href="">Home</a></div>
                <div><a href="#section1">PROCEDURE</a></div>
                <div><a href="#section2">SERVICE</a></div>
                <div><a href="#section3">CONTACT</a></div>
            </div>
            <div class="nav-right">
                <div class="nav-right-use" v-if="islogin" @click="r1">
                    <div style="color: #EC535B;"><img src="../assets/img/yonghu.svg" alt="">My Account</div>
                    <div class="droplist" v-if="droplist">
                        <div><a href="">我的凭证</a></div>
                        <div><a href="">凭证申请</a></div>
                        <div><a href="">账户信息</a></div>
                        <div class="divder"></div>
                        <div><a href="" @click="logout">退出</a></div>
                    </div>
                </div>
                <div class="login" v-if="!islogin">
                    <div style="color: #190E64;">
                        <RouterLink to="/StudentLogIn">Log In</RouterLink>
                    </div>
                    <RouterLink to="/SignUp">
                        <div class="signup">Sign Up</div>
                    </RouterLink>
                </div>
                <div style="color: rgba(25, 14, 100, 0.35);"><a href="">中文</a></div>
                <div style="color: #EC535B;"><a href="">English</a></div>
            </div>
        </div>
    </nav>
</template>
<script setup>
import router from '@/router';
import { ref, onMounted } from 'vue';



let islogin = ref(false);
let a = localStorage.getItem('username');
let droplist = ref(false);



let r1 = () => {
    droplist.value = !droplist.value
}


let logout = () => {
    localStorage.removeItem('username');
    router.push('/');
}


let fun = () => {

    if (a) {
        islogin.value = true
    }
}
onMounted(() => {
    fun()
})


</script>

<style scoped>
nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    background-color: #ffffff;
    height: 80px;

    .nav {
        width: 1150px;
        display: flex;
        line-height: 80px;
        justify-content: space-between;
        align-items: center;
        margin: auto;
        
       
        


        .logo img {
            width: 150px;
            display: flex;
        }

        .nav-left {
            display: flex;


            div {
                margin: 0 20px;
                font-weight: 600;
                color: rgba(25, 14, 100, 0.35);
            }

            div:hover {
                color: #190E64;
            }
        }

        .nav-right {
            display: flex;
            align-items: center;

            .login {
                display: flex;
                align-items: center;

                .signup {
                    text-align: center;
                    line-height: 36px;
                    width: 116px;
                    height: 36px;
                    border: 1px solid rgba(238, 83, 83, 1);
                    border-radius: 50px;
                    color: rgba(238, 83, 83, 1);
                }

                .signup:hover {
                    background-color: rgba(238, 83, 83, 1);
                    color: #ffffff;
                }
            }

            .nav-right-use {
                cursor: pointer;
                margin-right: 30px;
                position: relative;

                div {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        margin-right: 10px;
                    }
                }

                .droplist {
                    position: absolute;
                    top: 50px;
                    width: 150px;
                    background-color: #ffffff;
                    border: 1px solid #979797;
                    border-radius: 6px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    div {
                        :hover {
                            background-color: #979797;
                            color: #ffffff;
                            width: 150px;
                        }

                        text-align: center;
                        line-height: 30px;
                        color: #979797;
                    }

                    .divder {
                        width: 100%;
                        height: 1px;
                        background-color: #979797;
                        margin: 5px;

                    }
                }

            }

            div {
                margin: 0 10px;
                font-weight: 600;
            }
        }
    }
}
</style>